<template>
	<div class="login">
		<div class="login-top">
			<span>手机号登录</span>
			<i @click="isShow">x</i>
		</div>
		<div class="login-content">
			<section>
				<div class="phone">
					<a href="javascript:;">+ 86 <i class="icn"></i></a>
					<input type="text" placeholder="请输入手机号" v-model="phone" />
				</div>
				<div class="password">
					<input type="password" placeholder="请输入密码" v-model="password" />
				</div>
				<div class="prompt">
					<a href="javascript:;">短信登陆</a>
					<label for="autologin">
						<input type="checkbox" id="autologin" />自动登录
					</label>
				</div>
				<a href="javascript:;" @click="login" class="loginbtn">
					<div>登录</div>
				</a>
			</section>
		</div>
		<div class="login-bottom">
			<a href="javascript:;">其他登录方式</a>
			<a href="javascript:;">没有账号，免费注册</a>
		</div>
	</div>
	<div class="loginbg"></div>
</template>

<script>
export default {
	name: "LoginView",
};
</script>

<script setup>
import { ref } from "vue";
import { useStore } from "vuex";

const store = useStore();

const phone = ref("");
const password = ref("");

const login = () => {
	const pho = phone.value;
	const pas = password.value;
	store.dispatch("app/login", { pho, pas });
};

const isShow = () => {
	store.dispatch("app/isloginshow", false);
};
</script>

<style lang="less" scoped>
.login {
	position: fixed;
	left: 50%;
	top: 50%;
	width: 530px;
	transform: translate(-50%, -50%);
	border-radius: 4px;
	z-index: 100;
	background: #fff;
	.login-top {
		position: relative;
		margin: 0;
		padding: 0 45px 0 18px;
		height: 38px;
		line-height: 38px;
		z-index: 10;
		border-bottom: 1px solid #191919;
		border-radius: 4px 4px 0 0;
		background: #2d2d2d;
		font-weight: bold;
		font-size: 14px;
		color: #fff;
		i {
			position: absolute;
			z-index: 20;
			top: 16px;
			right: 20px;
			width: 10px;
			height: 10px;
			overflow: hidden;
			text-indent: -9999px;
			cursor: pointer;
			background: url(@/image/loginx.png) no-repeat;
			background-position: 0 -95px;
		}
	}
	.login-bottom {
		display: flex;
		justify-content: space-between;
		padding: 0 19px;
		height: 48px;
		border-top: 1px solid #c6c6c6;
		border-radius: 0 0 4px 4px;
		line-height: 48px;
		background-color: #f7f7f7;
		a:nth-child(1) {
			color: #0c72c3;
		}
	}
	.login-content {
		margin: 0 auto;
		padding: 30px 0 43px;
		width: 220px;
		.phone {
			position: relative;
			margin: 0;
			height: 30px;
			line-height: 30px;
			border: 1px solid #cdcdcd;
			border-radius: 2px;
			z-index: 11;
			a {
				position: relative;
				float: left;
				display: block;
				height: 30px;
				line-height: 30px;
				padding: 0 18px 0 5px;
				border-right: 1px solid #cdcdcd;
				color: #333;
				i {
					position: absolute;
					top: 14px;
					right: 7px;
					width: 7px;
					height: 4px;
					background: url(@/image/icon2.png) no-repeat;
					background-position: -260px -450px;
				}
			}
			input {
				display: block;
				padding: 0 8px;
				width: 68%;
				height: 100%;
				outline: none;
				border: none;
				color: #333;
				background: none;
			}
		}
		.password {
			position: relative;
			margin: 0;
			height: 30px;
			line-height: 30px;
			margin-top: 10px;
			border: 1px solid #cdcdcd;
			border-radius: 2px;
			z-index: 10;
			input {
				display: block;
				padding: 0 8px;
				width: 100%;
				height: 100%;
				outline: none;
				border: none;
				color: #333;
				background: none;
				box-sizing: border-box;
			}
		}
		.prompt {
			display: flex;
			justify-content: space-between;
			margin-top: 10px;
			color: #666;
			input {
				margin: 0 6px 0 0;
				vertical-align: middle;
			}
		}
		.loginbtn {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			white-space: nowrap;
			margin: 0 auto;
			padding: 0 5px 0 0;
			height: 31px;
			font-size: 12px;
			background: url(@/image/button2.png) no-repeat 0 9999px;
			width: 215px;
			margin-top: 20px;
			color: #fff;
			background-position: right -428px;
			div {
				width: 180px;
				height: 100%;
				padding: 0 15px 0 20px;
				background: url(@/image/button2.png) no-repeat 0 9999px;
				background-position: 0 -387px;
				line-height: 31px;
				text-align: center;
			}
		}
		.loginbtn:hover {
			background-position: right -510px;
			div {
				background-position: 0 -469px;
			}
		}
	}
}
.loginbg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #00000063;
	z-index: 99;
}
</style>
